<template>
  <div class="demo2" id="container">

  </div>
</template>

<script>
// 引入g6
import G6 from '@antv/g6'
// 引入数据
import demo2data from '@/vendor/treedata2.js'
// 引入节点的默认样式
import { defaultNode2, defaultEdge2 } from '@/utils/defaultstyle.js'
// 自定义节点
// G6.registerNode(nodeName, options, extendedNodeName)
export default {
  name: 'Demo2',
  data () {
    return {

    }
  },
  methods: {
    initfn () {
      const width = document.querySelector('.demo2').offsetWidth
      const height = document.querySelector('.demo2').offsetHeight
      //   console.log(height)
      //   console.log(width)
      // 创键实例
      const graph = new G6.Graph({
        container: 'container', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
        width: width || 600, // Number，必须，图的宽度
        height: height || 600, // Number，必须，图的高度
        // 节点在默认状态下的样式配置（style）和其他配置
        defaultNode: defaultNode2,
        // 边在默认状态下的样式配置（style）和其他配置
        defaultEdge: defaultEdge2,
        modes: {
          default: ['drag-canvas', 'zoom-canvas', 'drag-node'] // 允许拖拽画布、放缩画布、拖拽节点
        },
        // fitView: true, // 开启后自动适应屏幕大小
        linkCenter: true // 边是否连入节点的中心
        // nodeStateStyles: {}, // 各状态下的节点样式hover、selected
        // edgeStateStyles: {}, // 各状态下的边的样式hover、selected
        // animate: true// 全局动画
      })
      graph.data(demo2data) // 读取 Step 2 中的数据源到图上
      graph.render() // 渲染图
    }
  },
  mounted () {
    this.initfn()
  }
}
</script>

<style lang="less" scoped>
//更换画布的背景颜色
/deep/ canvas{
    background-color: rgba(183, 202, 209,.3);
}
.demo2{
    height: 100%;
    width: 100%;
}
</style>
